/* eslint-disable */
<template>
  <div>
    <div class="table-operator">
      <a-button type="primary" icon="plus" ghost @click="handleAdd">新增</a-button>
    </div>

    <a-table
      bordered
      rowKey="id"
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource">

      <template slot="ellipsis" slot-scope="text">
        <ellipsis :length="13">{{ text }}</ellipsis>
      </template>

      <template slot="description" slot-scope="text,record">
        {{ getDescription(record) }}
      </template>

      <template slot="switch" slot-scope="text,record">
        <a-switch size="small" :checked="record.status === 1" @click="(e)=>handleUpdateStatus(e, record.id)"/>
      </template>

      <template v-slot:action="text,record">
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical"/>
        <a-popconfirm title="确定删除吗？" placement="left" @confirm="handleDelete(record.id)">
          <a>删除</a>
        </a-popconfirm>
      </template>
    </a-table>

    <j-modal
      :title="title"
      :visible.sync="visible"
      :width="800"
      :okClose="false"
      :maskClosable="false"
      :confirmLoading="confirmLoading"
      @ok="handleModalOk">
      <a-form :form="form">
        <a-form-item label="规则名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入规则名称" v-decorator="['ruleName', validatorRules.ruleName]"/>
        </a-form-item>

        <a-form-item v-show="showRuleColumn" label="规则字段" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-search-select-tag placeholder="请选择规则字段" v-decorator="['ruleColumn']" :dictOptions="fieldOptions"></j-search-select-tag>
        </a-form-item>

        <a-form-item label="条件规则" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag
            @change="handleChangeRuleOperator"
            v-decorator="['ruleOperator', validatorRules.ruleOperator]"
            placeholder="请选择条件规则"
            dictCode="rule_conditions"
            triggerChange>
          </j-dict-select-tag>
        </a-form-item>

        <a-form-item label="规则值" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入规则值" v-decorator="['ruleValue', validatorRules.ruleValue]"/>
        </a-form-item>

        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group buttonStyle="solid" v-decorator="['status',{initialValue:1}]">
            <a-radio-button :value="1">有效</a-radio-button>
            <a-radio-button :value="0">无效</a-radio-button>
          </a-radio-group>
        </a-form-item>

      </a-form>
    </j-modal>
  </div>
</template>

<script>
  const mockdata = [{
    ruleName: '名称等于admin',
    ruleColumn: 'name',
    ruleOperator: '=',
    ruleValue: 'admin',
    status: 1,
    id: '1'
  }, {
    ruleName: '年龄大于等于18',
    ruleColumn: 'age',
    ruleOperator: '>=',
    ruleValue: '18',
    status: 0,
    id: '2'
  }]
  const USE_SQL_RULES = 'USE_SQL_RULES'
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import Ellipsis from '@/components/Ellipsis'
  import { getAction, postAction, putAction, deleteAction } from '@/api/manage'
  //import pick from 'lodash.pick'

  export default {
    name: 'AuthDataConfig',
    components: { Ellipsis },

    props: {
      cgformId: {
        type: String,
        default: '',
        required: true
      }
    },
    watch: {
      cgformId: {
        immediate: true,
        handler() {
          this.loadAuthData();
        }
      }
    },
    data() {
      return {
        loading: false,
        dataSource: mockdata,
        url: '/online/cgform/api/authData',
        columnList: [],
        columns: [
          { title: '启用', key: 'rowIndex', width: 80, align: 'center', scopedSlots: { customRender: 'switch' } },
          { title: '规则名称', dataIndex: 'ruleName', width: '130', align: 'center', scopedSlots: { customRender: 'ellipsis' } },
          /* { title: '规则字段',dataIndex: 'ruleColumn',width: '19%', align: 'center',scopedSlots: { customRender: 'ellipsis' }},
          { title: '规则条件',dataIndex: 'ruleOperator',width: '18%',align: 'center',scopedSlots: { customRender: 'ellipsis' }},
          { title: '规则值',dataIndex: 'ruleValue', width: '18%', align: 'center',scopedSlots: { customRender: 'ellipsis' }}, */
          { title: '规则描述', key: 'description', align: 'center', scopedSlots: { customRender: 'description' } },
          { title: '操作', key: 'action', width: 130, align: 'center', scopedSlots: { customRender: 'action' } }
        ],
        ruleOptions: [
          { value: 'gt', title: '大于' },
          { value: 'lt', title: '小于' },
          { value: 'eq', title: '等于' },
          { value: 'ne', title: '不等于' },
          { value: 'ge', title: '大于等于' },
          { value: 'le', title: '小于等于' },
          { value: 'left_like', title: '左模糊' },
          { value: 'right_like', title: '右模糊' },
          { value: 'like', title: '全模糊' },
          { value: 'like', title: '全模糊' }
        ],

        title: '',
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        labelCol: { sm: { span: 4 }, xs: { span: 24 } },
        wrapperCol: { sm: { span: 18 }, xs: { span: 24 } },
        validatorRules: {
          ruleName: { rules: [{ required: true, message: '请输入规则名称！' }] },
          ruleColumn: { rules: [{ required: true, message: '请选择规则字段！' }] },
          ruleOperator: { rules: [{ required: true, message: '请选择条件规则！' }] },
          ruleValue: { rules: [{ required: true, message: '请输入规则值！' }] }
        },
        model: {},
        showRuleColumn: true

      }
    },
    computed: {
      ...mapGetters({
        fieldOptions: 'onlAuthFields'
      })
    },
    methods: {
      getDescription(record) {
        if (record.ruleOperator == USE_SQL_RULES) {
          return '自定义SQL:' + record.ruleValue
        } else {
          return record.ruleColumn + '  ' + record.ruleOperator + '  ' + record.ruleValue
        }
      },
      loadAuthData() {
        getAction(`${this.url}/${this.cgformId}`).then(res => {
          console.log('loadAuthData', res)
          if (res.success) {
            this.dataSource = res.result
          } else {
            this.dataSource = []
            this.$message.warning(res.message)
          }
        })
      },
      handleUpdateStatus(e, id) {
        this.loading = true
        this.dataSource.map(item => {
          if (item.id == id) {
            item.status = Math.abs(item.status - 1)
            putAction(this.url, item).then(res => {
              console.log('saveAuthData', res)
              if (!res.success) {
                this.$message.warning(res.message)
              }
            }).finally(() => {
              this.loading = false
            })
          }
        })
      },
      handleEdit(record) {
        this.visible = true
        this.title = '编辑'
        this.model = Object.assign({}, record)
        this.form.resetFields()
        this.initRuleOperator()
        this.$nextTick(() => {
          this.form.setFieldsValue(this.$Jpick(this.model,'ruleName', 'ruleColumn','ruleOperator','ruleValue','status'))
        })
      },
      handleAdd() {
        this.visible = true
        this.title = '新增'
        this.model = {}
        this.form.resetFields()
      },
      handleModalOk() {
        // 触发表单验证
        const that = this;
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let formData = Object.assign(this.model, values)
            if (formData['ruleOperator'] == USE_SQL_RULES) {
              formData['ruleColumn'] = ''
            }
            formData['cgformId'] = this.cgformId
            console.log('请求参数', formData)
            if (this.title == '新增') {
              this.saveAuthData(formData)
            } else {
              this.editAuthData(formData)
            }
          }
        })
      },
      saveAuthData(formData) {
        postAction(this.url, formData).then(res => {
          console.log('saveAuthData', res)
          if (res.success) {
            this.visible = false
            this.loadAuthData()
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      },
      editAuthData(formData) {
        putAction(this.url, formData).then(res => {
          console.log('saveAuthData', res)
          if (res.success) {
            this.visible = false
            this.loadAuthData()
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      },
      handleDelete(id) {
        deleteAction(`${this.url}/${id}`).then(res => {
          if (res.success) {
            this.$message.success(res.message)
            this.loadAuthData()
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      handleChangeRuleOperator(val) {
        if (val == USE_SQL_RULES) {
          this.form.setFieldsValue({
            ruleColumn: ''
          })
          this.showRuleColumn = false
        } else {
          this.showRuleColumn = true
        }
      },
      initRuleOperator() {
        if (this.model.ruleOperator && this.model.ruleOperator == USE_SQL_RULES) {
          this.showRuleColumn = false
        } else {
          this.showRuleColumn = true
        }
      }

    }
  }
</script>
